<template>
  <div>
    <avue-crud :option="option"
               :data="data"
               :table-loading="option.loading"
               :permission="permissionList"
               v-model:page="page"
               @row-save="save"
               @row-del="del"
               @row-update="update"
               @on-load="init"
               @search-change="search"
               @refresh-change="refresh"
               @selection-change="selectChange"
               v-model="form">
      <template #menu-left="{size}">
        <el-button type="danger" :size="size"
                   icon="el-icon-delete"
                   v-if="!this.validatenull(this.permission.SysLog_remove)"
                   @click="delBatch">批量删除
        </el-button>
      </template>
    </avue-crud>
  </div>
</template>
<script>
import {list, pageList, query, save, update, remove} from '@/api/admin/SysLogApi.js'
import {mapGetters} from "vuex";

export default {
  data() {
    return {
      data: [],
      form: {},
      params: {},
      page: {
        currentPage: 1,
        pageSize: 10,
        total: 0
      },
      selectionList: [],
      option: {
        loading: true,
        selection: true,
        searchMenuSpan: 4,
        height: "auto",
        index: true,
        viewBtn:true,
        column: {
          username: {
            label: "操作账号",
          },
          url: {
            label: "访问url",
          },
          ip: {
            label: "来访Ip",
          },
          browser: {
            label: "浏览器",
            overHidden: true,
          },
          remark: {
            label: "描述",
          },
          requestTime: {
            label: "请求时间(ms)",
          },
          method: {
            label: "请求方法",
          },
          params: {
            label: "请求参数",
            hide:true
          },
          body: {
            label: "请求体",
            hide:true
          },
          responseBody: {
            label: "返回体",
            hide:true
          },
          requestMethod: {
            label: "请求方式",
          },
          createTime: {
            label: "创建时间",
          },
        }
      }
    }
  },
  computed: {
    ...mapGetters(["permission"]),
    selectIds() {
      let ids = [];
      this.selectionList.forEach((ele) => {
        ids.push(ele.id + "");
      });
      return ids.join(",") + "";
    },
    permissionList() {
      return {
        addBtn: !this.validatenull(this.permission.SysLog_add),
        delBtn: !this.validatenull(this.permission.SysLog_remove),
        editBtn: !this.validatenull(this.permission.SysLog_edit),
      };
    },
  },
  methods: {
    init() {
      this.option.loading = true;
      pageList(this.page, this.params).then(res => {
        this.data = res.data.data.records
        this.page.total=res.data.data.total
        this.option.loading = false;
      }).catch(() => {
        this.option.loading = false;
      })
    },
    save(row, done, loading) {
      loading();
      save(row).then(res => {
        this.refreshLoad(res)
      })
      done();
    },
    update(row, index, done, loading) {
      loading();
      update(row).then(res => {
        this.refreshLoad(res)
      })
      done();
    },
    del(row) {
      this.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        return remove(row.id);
      }).then((res) => {
        this.refreshLoad(res);
      });
    },
    delBatch() {
      if (this.selectIds.length === 0) {
        this.$message.error("请选择至少一条数据");
        return;
      }
      this.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        return remove(this.selectIds);
      }).then((res) => {
        this.refreshLoad(res)
      });
    },
    refreshLoad(res) {
      this.init();
      this.$message({
        type: "success",
        message: res.data.msg
      });
    },
    refresh() {
      this.init();
    },
    search(form, done) {
      this.params = form
      this.init();
      done();
    },
    selectChange(list) {
      this.selectionList = list;
    }
  },
}
</script>
<style scoped lang="scss">

</style>
